<template>
  <div>
    <a-drawer
      title="变更审核"
      :width="800"
      @close="closeDrawer"
      :visible="setting.visible"
      :wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
    >
      <a-spin :spinning="loading">
        <div>
          <detail-list :col="1">
            <detail-list-item term="医院名称">{{ hospitalInfo.name }}</detail-list-item>
          </detail-list>
          <detail-list>
            <detail-list-item term="所在城市">{{ hospitalInfo.city }}</detail-list-item>
            <detail-list-item term="员工数量">{{ hospitalInfo.staffCount }}人</detail-list-item>
          </detail-list>
          <detail-list :col="1">
            <detail-list-item term="联系地址">{{ hospitalInfo.address }}</detail-list-item>
          </detail-list>
        </div>
        <a-divider orientation="left">联系方式</a-divider>
        <div>
          <a-table
            :columns="contactsColumns"
            :rowKey="record => record.new.id"
            :dataSource="contacts"
            :pagination="false"
            bordered
          >
            <template slot="hospitalContact" slot-scope="hospitalContact, record">
              {{ record.old && record.old.hospitalContact ? record.old.hospitalContact : '' }}
              <br />
              <a-tag
                color="green"
                v-if="record.old.hospitalContact !== record.new.hospitalContact"
              >{{ record.new.hospitalContact }}</a-tag>
            </template>
            <template slot="phone" slot-scope="phone, record">
              {{ record.old && record.old.phone ? record.old.phone : '' }}
              <br />
              <a-tag color="green" v-if="record.old.phone !== record.new.phone">{{ record.new.phone }}</a-tag>
            </template>
            <template slot="wechat" slot-scope="wechat, record">
              {{ record.old && record.old.wechat ? record.old.wechat : '' }}
              <br />
              <a-tag
                color="green"
                v-if="record.old.wechat !== record.new.wechat"
              >{{ record.new.wechat }}</a-tag>
            </template>
            <template slot="remark" slot-scope="remark, record">
              {{ record.old && record.old.remark ? record.old.remark : '' }}
              <br />
              <a-tag
                color="green"
                v-if="record.old.remark !== record.new.remark"
              >{{ record.new.remark }}</a-tag>
            </template>
          </a-table>
        </div>
        <a-divider orientation="left">医材需求</a-divider>
        <div>
          <a-table
            :columns="materialColumns"
            :rowKey="record => record.new.id"
            :dataSource="materialDemands"
            :pagination="false"
            bordered
          >
            <template slot="quantity" slot-scope="quantity, record">
              {{ record.old ? record.old.quantity : '' }}
              <br />
              <a-tag
                color="green"
                v-if="record.old.quantity !== record.new.quantity"
              >{{ record.new.quantity }}</a-tag>
            </template>
            <template slot="unit" slot-scope="unit, record">
              {{ record.old ? record.old.unit : '' }}
              <br />
              <a-tag color="green" v-if="record.old.unit !== record.new.unit">{{ record.new.unit }}</a-tag>
            </template>
            <template slot="level" slot-scope="level, record">
              {{ record.old ? levels[record.old.level] : '' }}
              <br />
              <a-tag color="green" v-if="record.old.level !== record.new.level">{{ levels[record.new.level] }}</a-tag>
            </template>
            <template slot="remark" slot-scope="remark, record">
              {{ record.old ? record.old.remark : '' }}
              <br />
              <a-tag
                color="green"
                v-if="record.old.remark !== record.new.remark"
              >{{ record.new.remark }}</a-tag>
            </template>
          </a-table>
        </div>
        <div
          :style="{
            position: 'absolute',
            left: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'right',
          }"
          v-show="modifyRequest.status == 0"
        >
          <a-button type="primary" @click="handlePass">作废</a-button>
          <a-button type="primary" @click="handleSubmit" :style="{ marginLeft: '8px' }">审核</a-button>
        </div>
      </a-spin>
    </a-drawer>
  </div>
</template>

<script>
import { getModifyRequestDetails, invalidModifyRequest, passModifyRequest } from '@/api/modify-request'
import Notification from '@/utils/notification'
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item

const levels = [
  '已无此类物资',
  '一天内告急',
  '两天内告急',
  '三天内告急',
  '四天内告急',
  '五天内告急',
  '六天内告急',
  '七天内告急'
]

const contactsColumns = [
  {
    title: '联系人',
    dataIndex: 'old.hospitalContact',
    width: '80px',
    scopedSlots: { customRender: 'hospitalContact' }
  },
  {
    title: '联系人电话',
    dataIndex: 'old.phone',
    width: '80px',
    scopedSlots: { customRender: 'phone' }
  },
  {
    title: '微信',
    dataIndex: 'old.wechat',
    width: '80px',
    scopedSlots: { customRender: 'wechat' }
  },
  {
    title: '备注',
    dataIndex: 'old.remark',
    width: '80px',
    scopedSlots: { customRender: 'remark' }
  }
]

const materialColumns = [
  {
    title: '物资名称',
    dataIndex: 'old.demandName',
    scopedSlots: { customRender: 'demandName' }
  },
  {
    title: '物资数量',
    dataIndex: 'old.quantity',
    scopedSlots: { customRender: 'quantity' }
  },
  {
    title: '物资单位',
    dataIndex: 'old.unit',
    scopedSlots: { customRender: 'unit' }
  },
  {
    title: '优先级',
    dataIndex: 'old.level',
    scopedSlots: { customRender: 'level' }
  },
  {
    title: '备注',
    dataIndex: 'old.remark',
    scopedSlots: { customRender: 'remark' }
  }
]
export default {
  name: 'ModifyRequestDetail',
  components: {
    DetailList,
    DetailListItem
  },
  data () {
    return {
      hospitalInfo: {},
      modifyRequest: {},
      setting: {
        visible: false,
        modifyRequestId: 0
      },
      loading: false,
      materialColumns: materialColumns,
      materialDemands: [],
      contactsColumns: contactsColumns,
      contacts: [],
      levels: levels,
      notification: new Notification(this.$notification)
    }
  },
  created () {},
  mounted () {},
  methods: {
    fetchData (id) {
      const _this = this
      const promise = getModifyRequestDetails(id)
      this.loading = true
      promise
        .then(response => {
          console.log('fetchData:', response)
          _this.hospitalInfo = response.hospitalInfo || {}
          _this.modifyRequest = response.modifyRequest || {}
          _this.materialDemands = response.materialDemands || []
          _this.contacts = response.contacts || []
          _this.loading = false
        })
        .catch(context => {
          _this.loading = false
          _this.notification.httpError(`加载租户列表数据失败！`, context.response)
        })
    },
    openDrawer (id) {
      this.setting.visible = true
      this.setting.modifyRequestId = id
      if (id) {
        this.fetchData(this.setting.modifyRequestId)
      }
    },
    closeDrawer () {
      this.setting.visible = false
      this.$emit('onclosed')
    },
    handleSubmit () {
      this.loading = true
      invalidModifyRequest(this.setting.modifyRequestId)
        .then(response => {
          this.fetchData(this.setting.modifyRequestId)
        }).catch(context => {
          this.loading = false
          this.notification.httpError(`审核失败！`, context.response)
        })
    },
    handlePass () {
      this.loading = true
      passModifyRequest(this.setting.modifyRequestId)
        .then(response => {
          this.fetchData(this.setting.modifyRequestId)
        }).catch(context => {
          this.loading = false
          this.notification.httpError(`审核失败！`, context.response)
        })
    }
  }
}
</script>
